<template>
  <div class="app-container">
    <!--统计组件-->
    <panel-group :info="info" />

    <!--搜索区域-->
    <el-row style="margin-bottom: 30px">
      <el-col :span="3">
        <el-input v-model="searchQuery.keyword" style="width:95%" placeholder="客服/服务星名称" />
      </el-col>

      <el-col :span="3">
        <el-select v-model="searchQuery.kfRemark" placeholder="客服标记" style="width:95%">
          <el-option label="全部" value />
          <el-option label="已通过" value="P" />
          <el-option label="已加" value="Y" />
          <el-option label="未加" value="N" />
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-select v-model="searchQuery.serviceStarLevel" placeholder="服务星等级" style="width:95%">
          <el-option label="全部" value />
          <el-option
            v-for="item in serviceStarLevelList"
            :key="item.val"
            :label="item.text"
            :value="item.val"
          />
        </el-select>
      </el-col>

      <el-col :span="5">
        <el-date-picker
          v-model="time"
          :picker-options="pickerOptions"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="width:95%"
        />
      </el-col>
      <el-col :span="1.5">
        <el-button
          style="width:98%"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchFrom"
        >{{ $t('table.search') }}</el-button>
      </el-col>
      <el-col :span="1.5" style="margin-left:10px;">
        <el-button style="width:98%" class="filter-item" type="primary" @click="adjustForm">调整</el-button>
      </el-col>

      <el-col :span="1.5" style="margin-left:10px;">
        <el-button style="width:98%" class="filter-item" type="primary" @click="exportClick">导出</el-button>
      </el-col>
    </el-row>

    <!--表格区域-->
    <template>
      <el-table
        :data="tableData"
        border
        height="500"
        stripe
        style="width: 100%; background-color: #fff"
        @selection-change="selectionChange"
      >
        <el-table-column prop="serviceStarId" label="操作" width="55" type="selection">
          <!-- <template> -->
          <!-- <el-button
              v-if="scope.row.kfRemark !== 'P'"
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="toPass(scope.row.serviceStarId)"
          >通过</el-button>-->
          <!-- </template> -->
        </el-table-column>
        <el-table-column prop="serviceStarNickname" label="服务星昵称" width="150" />
        <el-table-column prop="serviceStarPhone" label="服务星手机" width="150" />
        <el-table-column prop="serviceStarRealname" label="真实姓名" width="150" />
        <el-table-column prop="serviceStarLevel" label="等级" width="100">
          <!-- <template slot-scope="scope">
            <svg-icon v-for="n in scope.row.serviceStarLevel"  icon-class="star" class="meta-item__icon"/>
          </template>-->
        </el-table-column>
        <el-table-column prop="nickname" label="专属客服" width="100" />
        <el-table-column prop="kfIsAdjust" label="是否调整" width="100">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.kfIsAdjust === 'Y'"
              :type="scope.row.kfIsAdjust | statusFilter"
            >已调整</el-tag>
            <el-tag
              v-if="scope.row.kfIsAdjust === 'N'"
              :type="scope.row.kfIsAdjust | statusFilter"
            >未调整</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="kfRemark" label="客服标记" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.kfRemark === 'Y'" :type="scope.row.kfRemark | remarkFilter">已加</el-tag>
            <el-tag v-if="scope.row.kfRemark === 'N'" :type="scope.row.kfRemark | remarkFilter">未加</el-tag>
            <el-tag v-if="scope.row.kfRemark === 'P'" :type="scope.row.kfRemark | remarkFilter">通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="starAchevement" label="星业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.starAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="marketAchevement" label="分销业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.marketAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="expenseAchevement" label="消费业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.expenseAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="orderAchevement" label="工单业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.orderAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="annualFee" label="是否交年费" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.annualFee === 'Y'" :type="scope.row.annualFee | statusFilter">是</el-tag>
            <el-tag v-if="scope.row.annualFee !== 'Y'" :type="scope.row.annualFee | statusFilter">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="joinDatetime" label="加入时间" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.joinDatetime"
            >{{ scope.row.joinDatetime | parseTime('{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createDatetime" label="注册时间" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.createDatetime"
            >{{ scope.row.createDatetime | parseTime('{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        :current-page="searchQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="searchQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <component :is="modal" :modal-data="modalData" @close="closeChild" />
  </div>
</template>

<script>
import AdjustModal from './dialog/adjust'
import { parseTime, pickerOptions } from '@/utils'
import PanelGroup from './../servicestar/panelGroup'
import { selectByAdvancedSearch, selectStatistical } from '@/api/serviceStar'
import { downLoad } from '@/api/serviceStarManager'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        Y: 'success',
        N: 'danger'
      }
      return statusMap[status]
    },
    remarkFilter(status) {
      const statusMap = {
        Y: 'pending',
        P: 'success',
        N: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {
    PanelGroup
  },
  data() {
    return {
      modal: null, // 调整框对象
      modalData: {}, // 调整框参数
      selectionList: [], // 表格选中数组对象
      info: {
        myCount: 0,
        myNoJoinCount: 0,
        all: 0,
        allNoJoinCount: 0,
        isManager: 'Y'
      },
      serviceStarLevelList: [
        { text: '0星', val: '0星' },
        { text: '1星', val: '1星' },
        { text: '2星', val: '2星' },
        { text: '3星', val: '3星' },
        { text: '4星', val: '4星' },
        { text: '5星', val: '5星' },
        { text: '合伙人', val: '合伙人' },
        { text: '加盟商', val: '加盟商' }
      ],
      tableData: [],
      pickerOptions: { shortcuts: pickerOptions },
      searchQuery: {
        pageSize: 10,
        pageNumber: 1,
        page: 1,
        keyword: '',
        starTime: '',
        endTime: '',
        kfRemark: '',
        serviceStarLevel: '',
        isManager: 'Y'
      },
      total: 0,
      time: ''
    }
  },
  created() {
    this.getList()
    this.getStatistical()
  },
  methods: {
    // 调用api接口
    getStatistical() {
      var data = { a: 1 }
      selectStatistical(data).then(response => {
        if (response.data.status === 'success') {
          //   this.info.myCount = response.data.data.myCount
          //   this.info.myNoJoinCount = response.data.data.myNoJoinCount
          this.info.all = response.data.data.all
          this.info.allNoJoinCount = response.data.data.allNoJoinCount
        }
      })
    },
    // 搜索
    searchFrom() {
      if (this.time !== null && this.time !== '') {
        this.searchQuery.starTime = parseTime(
          this.time[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.searchQuery.endTime = parseTime(
          this.time[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.searchQuery.starTime = null
        this.searchQuery.endTime = null
      }
      this.searchQuery.page = 1
      this.getList()
    },
    // 查询列表
    getList() {
      this.searchQuery.pageNumber =
        (this.searchQuery.page - 1) * this.searchQuery.pageSize
      selectByAdvancedSearch(this.searchQuery).then(response => {
        if (response.data.status === 'success') {
          this.tableData = response.data.data.list
          this.total = response.data.data.total
        }
      })
    },
    handleSizeChange(val) {
      this.searchQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.searchQuery.page = val
      this.getList()
    },

    /**
     * 表格选中事件
     */
    selectionChange(val) {
      this.selectionList = val
    },
    /**
     *  调整
     */
    adjustForm() {
      if (this.selectionList.length === 0) {
        this.$message({
          showClose: true,
          message: '操作不当',
          type: 'warning'
        })
      } else {
        this.modal = AdjustModal
        this.modalData = {
          selectionData: this.selectionList,
          type: 'update',
          shutDownModelAndRefresh: this.shutDownModelAndRefresh
        }
      }
    },
    /**
     * 导出
     */
    exportClick() {
      downLoad(this.searchQuery).then(res => {
        const date = new Date()
        const filefix =
          date.getFullYear() +
          '-' +
          date.getMonth() +
          '-' +
          date.getDate() +
          ' ' +
          date.getHours() +
          ':' +
          date.getMinutes() +
          ':' +
          date.getSeconds()
        const blob = new Blob([res.data], {
          type: 'text/csvchartset=utf-8' // 将会被放入到blob中的数组内容的MIME类型
        }) // 创建一个blob对象
        const a = document.createElement('a') // 创建一个<a></a>标签
        a.href = URL.createObjectURL(blob) // response is a blob
        a.download = filefix + '服务星数据.csv' // 文件名称
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
        return res
      })
    },
    closeChild() {
      this.modal = null
    },
    /**
     * 关闭回调
     */
    shutDownModelAndRefresh() {
      this.modal = null
      this.getList()
    }
  }
}
</script>
